<template>
 <div class="content">
		<div class="reault_tit">
			<img src="../../assets/image/pretest/resultTIt.png" alt="">
		</div>
		<div class="overview result_div">
			<div class="level_box">
				<img src="../../assets/image/pretest/xunzhang1.png" alt="">
			</div>
			<div class="userbox">
				<div class="userbox_head">
					<img src="../../assets/image/home/default_head.png" alt="">
				</div>
				<div class="userbox_txt">小雨同学</div>
			</div>
			<div class="result_div_tit">测评雷达图</div>
			<div class="radar_box" id="radar">
			</div>
			<div class="radar_option">
				<div>
					<div></div>
					<span>你的测评</span>
				</div>
				<div>
					<div></div>
					<span>平均值</span>
				</div>
			</div>
			<div class="result_conclusion">综合得分为96分，能力值超过了全国60%的小朋友。</div>
		</div>
		<div class="overview score_box">
			<div class="score_box_tit">题型得分分析</div>
			<div class="score_box_data">
				<div class="score_box_data_item">
					<div></div>
					<div>考量题型</div>
					<span>14</span>
					<div>类</div>
				</div>
				<div class="score_box_data_item">
					<div></div>
					<div>正确率</div>
					<span>90</span>
					<div>%</div>
				</div>
				<div class="score_box_data_item">
					<div></div>
					<div>测试时长</div>
					<span>15</span>
					<div>分</div>
					<span>01</span>
					<div>秒</div>
				</div>
			</div>
			<div class="charts_tit">
				<div>答对率&速度分析</div>
				<div>
					<div>
						<div></div>
						<div>平均时间</div>
					</div>
					<div>
						<div></div>
						<div>我的用时</div>
					</div>
				</div>
			</div>
			<div class="charts_table" id="table">
				
			</div>
			<div class="question_result">
				<div class="question_result_top">
					<div class="question_result_top_tit">
						<div></div>
						<div>阅读广度</div>
					</div>
					<div class="question_result_top_pie">
						<div class="question_result_pie_option">
							<div>正确率</div>
							<div>
								<div></div>
								<div>我的</div>
							</div>
							<div>
								<div></div>
								<div>全国平均</div>
							</div>
						</div>
						<div class="question_result_big_pie_box">
							<div class="question_result_pie_box" id="pie_box">
							</div>
							<div class="pie_center_num">100%</div>
							<div class="pie_center_num2">87%</div>
						</div>
					</div>
					<div class="question_result_top_evaluate">
						<span>评价</span><span>A</span>
					</div>
					<div class="question_result_top_time">
						<span>耗时</span>
						<span>3分10秒</span>
						<span>(超过平均时长10%)</span>
						<span>显示题目</span>
					</div>
					<div class="question_result_top_switch">
						<el-switch
						  v-model="showflag"
						  active-color="#B0C7E0"
						  inactive-color="#6E78D8">
						</el-switch>
					</div>
				</div>
				<div class="question_result_question_box" :class="{question_result_question_box_hide:showflag}">
					
				</div>
				<div class="question_result_read">
					<div class="question_result_read_tit">内容解析</div>
					<div class="question_result_read_content">
						<div class="question_result_read_kefu">
							<img src="../../assets/image/pretest/head.png" alt="">
						</div>
						阅读广度的能力很强，答题很积极认真，继续努力不断提升孩子的阅读广度吧
					</div>
				</div>
			</div>
		</div>
		
		<div class="rate_level overview">
			<div class="rate_level_tit">评定级别</div>
			<div class="rate_level_level">Level 2</div>
			<div class="rate_level_table">
				<div>
					<div>级别</div>
					<div>er值</div>
					<div>建议年龄</div>
					<div>学习重点</div>
				</div>
				<div>
					<div class="pos_rea">
						<div class="arrow_img">
							<img src="../../assets/image/pretest/arrowup.png" alt="">
						</div>
						<div>Level</div>
						<div>1</div>
					</div>
					<div>200以下</div>
					<div>4-6岁</div>
					<div>
						<div>· 基础课程</div>
						<div>· 识字量加强</div>
					</div>
				</div>
				<div class="rate_level_table_special">
					<div>
						<div  class="pos_rea">
							<div class="arrow_img">
								<img src="../../assets/image/pretest/arrowup.png" alt="">
							</div>
							<div>Level</div>
							<div>2</div>
						</div>
						<div  class="pos_rea">
							<div class="arrow_img">
								<img src="../../assets/image/pretest/arrowup.png" alt="">
							</div>
							<div>Level</div>
							<div>3</div>	
						</div>
					</div>
					<div>
						<div>200-500</div>
						<div>500-900</div>
					</div>
					<div>6-8岁</div>
					<div>
						<div>· 基础课程</div>
						<div>· 识字量加强</div>
						<div>· 阅读广度加强</div>
					</div>
				</div>
				<div>
					<div  class="pos_rea">
						<div class="arrow_img">
							<img src="../../assets/image/pretest/arrowdown.png" alt="">
						</div>
						<div>Level</div>
						<div>4</div>
					</div>
					<div>900-1200</div>
					<div>8-12岁</div>
					<div>
						<div>· 识字量加强</div>
						<div>· 阅读广度加强</div>
						<div>· 眼动</div>
						<div>· 概括及词语逻辑提升</div>
					</div>
				</div>
				<div>
					<div  class="pos_rea">
						<div class="arrow_img">
							<img src="../../assets/image/pretest/arrowup.png" alt="">
						</div>
						<div>Level</div>
						<div>5</div>
					</div>
					<div>1200以上</div>
					<div>12-15岁</div>
					<div>
						<div>· 朗读</div>
						<div>· 潜在逻辑推理</div>
						<div>· 情景再现</div>
					</div>
				</div>
			</div>
		</div>
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {
		showflag:false,
		radar:{
					indicator: [
						{ text: '语文', max: 150 },
						{ text: '数学', max: 150 },
						{ text: '英语', max: 150 },
						{ text: '物理', max: 120 },
						{ text: '化学', max: 108 },
						{ text: '生物', max: 72 }
					],
					center: ['50%', '50%'],
					radius: 120,
					name: {
						textStyle: {
							color: '#fff',
							backgroundColor: '#666',
							borderRadius: 3,
							padding: [3, 5]
						}
					}

			}

 	}
 },
		mounted(){
			this.renderRadar()
			this.renderColumn()
			this.renderPie()
		},
		beforeDestroy() {


		},
		 methods:{
			 renderPie(){
				 var echarts = require('echarts');
				 // 基于准备好的dom，初始化echarts实例
				 var myChartPie = echarts.init(document.getElementById('pie_box'));
				 var option = {
					color:['#5F32F1', 'transparent', '#FFD966','transparent'],
					series: [
					{
						name: '我的',
						type: 'pie',
					   radius: ['45%', '70%'],
						label: {
							position: 'inner',
							fontSize: 14,
						},
			  
						data: [
							{value: 90, name: ''},
							{value: 10, name: ''},

						]
					},
					{
						name: '全国平均',
						type: 'pie',
						labelLine: {
							length: 30,
						},
						radius: ['70%', '90%'],
						label: {
								normal: {
								   position: 'inner',
								   show : false
								}
						},
						data: [
							{value: 50, name: ' '},
							{value: 50, name: ''},
					
						]
					}
				]
			};
			myChartPie.setOption(option);			

			},
			renderColumn(){
							var echarts = require('echarts');
							// 基于准备好的dom，初始化echarts实例
							var myChartColumn = echarts.init(document.getElementById('table'));
							 var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				// legend: {
				//     data: ['正确率', '平均时间', '我的用时']
				// },
				xAxis: [
					{
						type: 'category',
						data: ['阅读广度', '词语逻辑', '识字量', '长句理解', '命名速度', '潜在信息推理', '概括力', '阅读实战', '眼动'],
						axisPointer: {
							type: 'shadow'
						}
					}
				],
				yAxis: 
				[
					{
						type: 'value',
						name: '用时',
						min: 0,
						max: 3600,
						interval: 600,
						axisLabel: {
							formatter: '{value} S'
						}
					},
					{
						type: 'value',
						name: '正确率',
						min: 0,
						max: 100,
						interval: 10,
						axisLabel: {
							formatter: '{value} %'
						}
					}
				],
				series: [
					{
						name: '我的用时',
						type: 'line',
						data: [600, 1800, 2400, 2600, 2540, 2790, 2000, 1000, 1900],
						color:"#48BFFF"
					},
					{
						name: '平均时间',
						type: 'line',
						data: [1600, 1200, 2900, 2700, 2040, 2490, 2100, 1400, 2000],
						color:"#FFCC42"
					},
					{
						name: '正确率',
						type: 'bar',
						yAxisIndex: 1,
						data: [80, 50, 70, 100, 100, 95, 45, 79, 80],
						barWidth:20,
						color:'#7676F5'
					}
				]
			};
				myChartColumn.setOption(option);
			},
			renderRadar(){
				var echarts = require('echarts');
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('radar'));
				var option = {
				    color: [ '#FFC018', '#7071D1', '#56A3F1', '#FF917C'],
				    radar: [
				      
				        {
				            indicator: [
				                { text: '语文', max: 150 },
				                { text: '数学', max: 150 },
				                { text: '英语', max: 150 },
				                { text: '物理', max: 120 },
				                { text: '化学', max: 108 },
				                { text: '生物', max: 72 }
				            ],
				            center: ['50%', '50%'],
				            radius: 120,
				            name: {
				                textStyle: {
				                    color: '#75828F',
				                    // backgroundColor: '#666',
				                    borderRadius: 3,
				                    padding: [3, 5]
				                }
				            }
				
				        }
				    ],
				    series: [
				        {
				            name: '雷达图',
				            type: 'radar',
				            emphasis: {
				                lineStyle: {
				                    width: 4,
									color:'#75828F',
				                }
				            },
				            data: [
				                {
				                    value: [120, 118, 130, 100, 99, 70],
				                    name: 'Data A'
				                },
				                {
				                    value: [100, 93, 50, 90, 70, 60],
				                    name: 'Data B',
				                    areaStyle: {
				                        color: 'rgba(105, 104, 206, 0.6)'
				                    }
				                }
				            ]
				        }
				     
				    ]
				};
				
				myChart.setOption(option);
			}
		 },


		 watch: {

		 }
	}
</script>
<style lang="less" scoped>
.content{
	background-image: url(../../assets/image/pretest/resultback1.jpg);
	background-size: 100%;
	min-height: 100vh;
	padding: 0.71rem 0 1.64rem 0;
	.reault_tit{
		margin: 0 auto;
		width: 4.86rem;
		height: 0.67rem;
		margin-bottom: 1.48rem;
		img{
			width: 100%;
			height: 100%;
			display: block;
		}
	} 
	.overview{
		width: 12.01rem;
		position: relative;
		box-sizing: border-box;
		border-radius: 0.2rem;
		margin: 0 auto;
	}
	.result_div{
		height: 7.14rem;
		border-radius: 0.2rem;
		padding: 0.41rem 0 0 0;
		background: linear-gradient(0deg, #DDEEFF 54%, #FFFFFF 100%);
		margin-bottom: 0.29rem;
		.userbox{
			width: 1.58rem;
			height: 0.5rem;
			padding-left: 0.47rem;
			box-sizing: border-box;
			background: linear-gradient(82deg, #FFF8F1 0%, #FFECD3 100%);
			border-radius: 0px 0.24rem 0.24rem 0px;
			margin-left: 0.67rem;
			position: relative;
			margin-bottom: 0.09rem;
			.userbox_head{
				width: 0.65rem;
				height: 0.65rem;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -0.23rem;
				&>img{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.userbox_txt{
				font-size: 0.18rem;
				color: #212121;
				line-height: 0.5rem;
			}
		}
		.result_div_tit{
			font-size: 0.32rem;
			font-weight: bold;
			color: #4852C2;
			line-height: 0.38rem;
			background: linear-gradient(0deg, #343C9B 0%, #5F6AD8 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-align: center;
			margin-bottom: 0.36rem;
		}
		.radar_box{
			width: 3.208rem;
			height: 3.208rem;
			margin: 0 auto;
			margin-bottom: 0.36rem;
			position: relative;
		}
		.radar_option{
			height: 0.17rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 5.06rem;
			margin-bottom: 0.53rem;
			&>div{
				box-sizing: border-box;
				font-size: 0.144rem;
				line-height: 0.17rem;
				display: flex;
				align-items: center;
				
				&>div{
					margin-right: 0.09rem;
				}
			}
			&>div:nth-child(1){
				&>div{
					width: 0.18rem;
					height: 0.17rem;
					background: linear-gradient(0deg, #6D75E3 0%, #A2B3FF 100%);
					border: 0.02rem solid #6968CE;
					border-radius: 0.03rem;
				}
			}
			&>div:nth-child(2){
				&>div{
					width: 0.18rem;
					height: 0.17rem;
					border: 0.03rem solid #FFCF4F;
					border-radius: 0.03rem;
				}
			}
		}
		.result_conclusion{
			color: #323233;
			font-size: 0.18rem;
			text-align: center;
		}
	}
	.score_box{
		padding: 0.65rem 0 1.07rem;
		margin-bottom: 0.25rem;
		background: #DDEEFF;
		.score_box_tit{
			font-size: 0.32rem;
			font-weight: bold;
			color: #4852C2;
			text-align: center;
			line-height: 0.38rem;
			background: linear-gradient(0deg, #343C9B 0%, #5F6AD8 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 0.5rem;
		}
		.score_box_data{
			padding: 0 2.48rem 0 2.26rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 0.65rem;
			&>.score_box_data_item{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				&>div{
					font-size: 0.18rem;
					color: #323233;
				}
				&>div:nth-child(1){
					width: 0.12rem;
					height: 0.07rem;
					background: linear-gradient(-6deg, #5F26EF 0%, #617FFF 100%);
					border-radius: 0.04rem;
				}
				&>div:nth-child(2){
					margin: 0 0.13rem 0 0.05rem;
				}
				&>span{
					font-size: 0.32rem;
					font-weight: bold;
					padding-bottom: 0.1rem;
				}
			}
		}
		.charts_tit{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			padding: 0 1.19rem 0 0.8rem;
			&>div:nth-child(1){
				font-size: 0.21rem;
			}
			&>div:nth-child(2){
				font-size: 0.14rem;
				color: #7B7B84;
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				&>div{
					display: flex;
					align-items: center;
					justify-content: center;
					&>div:nth-child(1){
						width: 0.2rem;
						height: 0.04rem;
						background: #FFCC42;
						border-radius: 0.02rem;
						margin-right: 0.05rem;
					}
				}
				&>div:nth-child(1){
					margin-right: 0.31rem;
					&>div:nth-child(1){
						background: #48BFFF;
						
					}
				}
			}
		}
		.charts_table{
			padding: 0 1.19rem 0 0.89rem;
			height: 3.4rem;
			margin-bottom: 0.91rem;
		}
		.question_result{
			padding-bottom: 0.79rem;
			.question_result_top{
				display: flex;
				align-items: flex-start;
				margin-bottom: 0.34rem;
				.question_result_top_tit{
					width: 1.97rem;
					height: 0.5rem;
					background: linear-gradient(90deg, #5F26EF 0%, #617FFF 100%);
					border-radius: 0px 0.25rem 0.25rem 0px;
					padding: 0 0.35rem;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 0.41rem;
					&>div:nth-child(1){
						width: 0.1rem;
						height: 0.1rem;
						border-radius: 50%;
						background: #fff;
						opacity: 0.4;
					}
					&>div:nth-child(2){
						font-size: 0.21rem;
						color: #FFFFFF;
					}
				}
				.question_result_top_pie{
					height: 1.54rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.question_result_pie_option{
						width: 0.75rem;
						height: 100%;
						color: #454545;
						&>div:nth-child(1){
							font-size: 0.21rem;
							margin-bottom: 0.75rem;
						}
						&>div:nth-child(2),&>div:nth-child(3){
							display: flex;
							align-items: center;
							font-size: 0.14rem;
							&>div:nth-child(1){
								width: 0.11rem;
								height: 0.11rem;
								border-radius: 50%;
								background: #5F32F1;
								margin-right: 0.02rem;
							}
						}
						&>div:nth-child(3){
							&>div:nth-child(1){
								background: #FFD966;
							}
						}
					}
					.question_result_big_pie_box{
						width: 1.54rem;
						height: 1.54rem;
						position: relative;
						margin-right: 0.71rem;
					}
					.pie_center_num{
						position: absolute;
						font-size: 0.21rem;
						color: #5F32F1;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
					}
					.pie_center_num2{
						position: absolute;
						font-size: 0.21rem;
						color: #FFC618;
						right: -20%;
						bottom: 0%;
					}
					.question_result_pie_box{
						width: 1.54rem;
						height: 1.54rem;
					}
				}
				.question_result_top_evaluate{
					width: 1.37rem;
					height: 0.3rem;
					border-right: 0.01rem solid #B5B5B5;
					border-left: 0.01rem solid #B5B5B5;
					text-align: center;
					line-height: 0.3rem;
					font-size: 0.21rem;
					&>span:nth-child(2){
						color: #5F32F1;
						margin-left: 0.11rem;
					}
				}
				.question_result_top_time{
					font-size: 0.21rem;
					color: #FF261B;
					&>span:nth-child(1){
						margin-left: 0.26rem;
						margin-right: 0.1rem;
						font-size: #454545;
					}
					&>span:nth-child(3){
						font-size: 0.16rem;
						margin-left: 0.12rem;
					}
					&>span:nth-child(4){
						font-size: 0.16rem;
						margin-left: 0.29rem;
						margin-right: 0.14rem;
						color: #7B8C9E;
					}
				}
				.question_result_top_switch{
					width: 0.56rem;
					height: 0.31rem;
					position: relative;
					.el-switch{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
			.question_result_question_box{
				background: #EDF6FF;
				width: 8.02rem;
				height: 1rem;
				margin-left: 2.32rem;
				border-radius: 0.1rem;
			}
			.question_result_question_box_hide{
				height: 0rem;
			}
		}
		.question_result_read{
			margin-top: 0.32rem;
			margin-left: 2.32rem;
			.question_result_read_tit{
				font-size: 0.21rem;
				margin-bottom: 0.35rem;
			}
			.question_result_read_content{
				background: #EDF6FF;
				position: relative;
				width: 7.98rem;
				height: 0.68rem;
				line-height: 0.68rem;
				padding-left: 1.16rem;
				font-size: 0.18rem;
				color: #545454;
				box-sizing: border-box;
				border-radius: 0.05rem;
				.question_result_read_kefu{
					width: 0.81rem;
					height: 0.87rem;
					position: absolute;
					left: 0.11rem;
					top: -0.25rem;
					&>img{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
		}
	}
	.level_box{
		width: 2.84rem;
		height: 2.84rem;
		position: absolute;
		top: -1.66rem;
		left: 50%;
		transform: translateX(-50%);
		background-image: url(../../assets/image/pretest/bulin.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		&>img{
			width: 1.71rem;
			height: 1.71rem;
			display: block;
		}
	}
	.rate_level{
		height: 7.14rem;
		background: linear-gradient(0deg, #DDEEFF 54%, #FFFFFF 100%);
		padding-top: 0.53rem;
		.rate_level_tit{
			font-size: 32px;
			font-weight: bold;
			color: #4852C2;
			line-height: 0.38rem;
			background: linear-gradient(0deg, #343C9B 0%, #5F6AD8 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-align: center;
			margin-bottom: 0.33rem;
		}
		.rate_level_level{
			width: 1.05rem;
			height: 0.31rem;
			background: #E7DDFF;
			border-radius: 0.05rem;
			font-size: 0.16rem;
			font-weight: bold;
			color: #5737D7;
			line-height: 0.32rem;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 0.68rem;
		}
		.rate_level_table{
			height: 4.39rem;
			width: 8.83rem;
			margin: 0 auto;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			&>div{
				width: 1.43rem;
				display: flex;
			    flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				&>div{
					width: 100%;
					height: 0.56rem;
					margin-bottom: 0.04rem;
				}
				&>div:nth-child(1){
					border-radius: 0.1rem 0.1rem 0px 0px;
				}
				&>div:nth-child(4){
					height: 1.36rem;
				}
			}
			&>div:nth-child(1){
				&>div{
					background: #D7E5F2;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				font-size: 0.16rem;
				color: #3B3B3B;
			}
			&>div:nth-child(1){
				&>div{
					background: #D7E5F2;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				font-size: 0.16rem;
				color: #3B3B3B;
			}
			&>div:nth-child(2){
				&>div{
					background: #F39159;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&>div:nth-child(1),&>div:nth-child(4){
					flex-direction: column;
				}
				&>div:nth-child(4){
					&>div{
						width: 80%;
					}
				}
				&>div:nth-child(1){
					&>div:nth-child(2){
						font-size: 0.21rem;
					}
				}
				font-size: 0.16rem;
				color: #FFFFFF;
			}
			&>div:nth-child(4){
				&>div{
					background: #52B6FF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&>div:nth-child(1),&>div:nth-child(4){
					flex-direction: column;
					
				}
				&>div:nth-child(4){
					&>div{
						width: 80%;
					}
				}
				&>div:nth-child(1){
					height: 1.49rem;
					&>div:nth-child(2){
						font-size: 0.21rem;
					}
				}
				font-size: 0.16rem;
				color: #FFFFFF;
			}
			&>div:nth-child(5){
				&>div{
					background: #5880EB;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&>div:nth-child(1),&>div:nth-child(4){
					flex-direction: column;
				}
				&>div:nth-child(4){
					&>div{
						width: 80%;
					}
				}
				&>div:nth-child(1){
					height: 1.79rem;
					&>div:nth-child(2){
						font-size: 0.21rem;
					}
				}
				font-size: 0.16rem;
				color: #FFFFFF;
			}
			&>.rate_level_table_special{
				font-size: 0.16rem;
				color: white;
				width: 2.91rem;
				&>div:nth-child(3),&>div:nth-child(4){
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFB818;
				}
				&>div:nth-child(4){
					flex-direction: column;
					&>div{
						width: 60%;
						
					}
				}
				&>div:nth-child(1),&>div:nth-child(2){
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					&>div{
						background: #FFB818;
						width: 1.43rem;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&>div:nth-child(1),&>div:nth-child(2){
						flex-direction: column;
						
					}
				}
				&>div:nth-child(1){
					&>div:nth-child(1){
						border-radius: 0.1rem 0.1rem 0px 0px;
						height: 0.89rem;
					}
					&>div:nth-child(2){
						border-radius: 0.1rem 0.1rem 0px 0px;
						height: 1.19rem;
					}
				}
				&>div:nth-child(2){
					&>div{
						height: 0.56rem;
					}
				}
				
			}
		}
	}

}
.pos_rea{
	position: relative;
}
.arrow_img{
	width: 0.29rem;
	height: 0.32rem;
	position: absolute;
	left: 50%;
	margin-left: -0.145rem;
	top: -0.43rem;
	&>img{
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>